import React from 'react'
import classes from './index.module.scss'
import Person from './01.factory'
import Token from './02.single-example'
import MapAdapter, { GaodeMap } from './03.adapter'
import Subsciption, { Observer } from './05.observer'
import PubSub from './06.pubsub'

const doFactory = () => {
    const student = Person.create('Student')
    const teacher = Person.create('Teacher')
    console.log(student, teacher)
    return JSON.stringify({
        student,
        teacher,
    })
}
const doSingleExample = () => {
    const token1 = new Token('123456789')
    const token2 = new Token('987654321')
    console.log(token1, token2, token1 === token2) // Token {token: '123456789'} Token {token: '123456789'} true
    return JSON.stringify({
        token1,
        token2,
    })
}
const doAdapter = () => {
    const render = (map: MapAdapter | GaodeMap) => {
        return map.show()
    }
    const result1 = render(new MapAdapter())
    const result2 = render(new GaodeMap())
    console.log(result1, result2)

    return JSON.stringify({
        result1,
        result2,
    })
}
const doObeserver = () => {
    const subsciption = new Subsciption()
    const observer1 = new Observer('observer1')
    const observer2 = new Observer('observer2')
    subsciption.add(observer1)
    subsciption.add(observer2)
    subsciption.notify()
    subsciption.remove(observer1)
    subsciption.notify()
    console.log(subsciption)

    return JSON.stringify({
        subsciption,
        observer1,
        observer2,
    })
}
const doSubsub = () => {
    const pubsub = new PubSub()
    pubsub.subscribe('test', (data: any) => {
        console.log('test', data)
    })
    pubsub.subscribe('test2', (data: any) => {
        console.log('test2', data)
    })
    pubsub.publish('test', {
      name: 'tom',
      age: 15
    })
    pubsub.publish('test2', 'test2')
    console.log(pubsub)

    return JSON.stringify({
        pubsub,
    })
}

// const fileNames = (require as any).context('./', true, /\.ts$/)
// console.dir(fileNames)
const codes = [
    {
        label: '工厂模式',
        code: Person.toString(),
        doCode: doFactory.toString(),
        result: doFactory(),
    },
    {
        label: '单例模式',
        code: Token.toString(),
        doCode: doSingleExample.toString(),
        result: doSingleExample(),
    },
    {
        label: '适配器模式',
        code: MapAdapter.toString(),
        doCode: doAdapter.toString(),
        result: doAdapter(),
    },
    {
        label: '观察者模式',
        code: Observer.toString(),
        doCode: doObeserver.toString(),
        result: doObeserver(),
    },
    {
        label: '发布订阅者模式',
        code: PubSub.toString(),
        doCode: doSubsub.toString(),
        result: doSubsub(),
    },
]
function DesignPatterns() {
    return (
        <div className={`${classes['design-patterns']}`}>
            {codes.map((code, index) => {
                return (
                    <div
                        key={index}
                        className={`${classes['design-patterns-item']}`}
                    >
                        <h2
                            className={`${classes['design-patterns-item-label']}`}
                        >
                            {code.label}
                        </h2>
                        <div
                            className={`${classes['design-patterns-item-code']}`}
                        >
                            {code.code}
                        </div>
                        <div
                            className={`${classes['design-patterns-item-do-code']}`}
                        >
                            {code.doCode}
                        </div>
                        <div
                            className={`${classes['design-patterns-item-result']}`}
                        >
                            {code.result}
                        </div>
                    </div>
                )
            })}
        </div>
    )
}

export default DesignPatterns
